<template>
	<div>
		<div class="breadcrumb-wrap">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>Steps步骤条</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="paddingT20">
			<el-progress type="circle" :percentage="percentage"></el-progress>
			<el-steps :space="100" :active="active">
				<el-step title="已提交" icon="upload"></el-step>
				<el-step title="待处理" icon="edit"></el-step>
				<el-step title="已完成" icon="check"></el-step>
			</el-steps>
			<el-button class="marginT20" @click="next" :disabled="disabled">下一步</el-button>
		</div>
	</div>
</template>

<script>
	export default{
		name:'three',
		data(){
			return{
				active:0,
				percentage:0,
				disabled:false
			}
		},
		methods:{
			next(){
				if(this.active++>2){
					this.active=3;
					this.disabled=true
				}else{
					this.percentage=Math.round(parseFloat(this.active/3)*100)
				}
			}
		}
	}
</script>

<style>
</style>